<template>
    <div class="pageMain"><!---->
        <div class="myCourses">
            <div class="creativeInfo"
                style="background-image: url(https://www.codelover.club/static/img/mycoursebg.c42996a9.png);">
                <div class="container">
                    <div class="componentsBreadcrumb">
                        <div aria-label="Breadcrumb" role="navigation" class="el-breadcrumb"><span
                                class="el-breadcrumb__item"><span role="link"
                                    class="el-breadcrumb__inner is-link">首页</span><span role="presentation"
                                    class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"
                                aria-current="page"><span role="link" class="el-breadcrumb__inner"> 我的课程 </span><span
                                    role="presentation" class="el-breadcrumb__separator">/</span></span></div>
                    </div>
                    <div class="position">
                        <div class="picture"><img data-src="https://www.codelover.club/icons/user/icon14.png"
                                src="https://www.codelover.club/icons/user/icon14.png" lazy="loaded"></div>
                        <div class="info">
                            <div class="name"> shen </div>
                            <div class="label"> 大学生 </div>
                        </div><!---->
                    </div>
                </div>
            </div>
            <div class="myCoursesPageNav" changeduring="myStudy">
                <div class="container">
                    <div class="flexBox">
                        <div><img
                                src=""
                                alt=""></div>
                        <div class="title isActive"> 学习 (8) </div>
                    </div>
                </div>
            </div>
            <div class="switchBtn">
                <div role="radiogroup" class="el-radio-group"><label role="radio" aria-checked="true" tabindex="0"
                        class="el-radio is-checked"><span class="el-radio__input is-checked"><span
                                class="el-radio__inner"></span><input type="radio" aria-hidden="true" tabindex="-1"
                                autocomplete="off" class="el-radio__original" value="true"></span><span
                            class="el-radio__label">正在进行<!----></span></label><label role="radio" tabindex="-1"
                        class="el-radio"><span class="el-radio__input"><span class="el-radio__inner"></span><input
                                type="radio" aria-hidden="true" tabindex="-1" autocomplete="off"
                                class="el-radio__original" value="false"></span><span
                            class="el-radio__label">已完成<!----></span></label></div>


            </div><!----><!----><!----><!----><!---->
            <div class="Projectbox" :class="{ expanded: isExpanded }" :style="{
                transition: `max-height ${isExpanded ? '0.1s' : '0.1s'} ease-out`
            }">


                <div role="tabpanel" aria-labelledby="el-collapse-head-1791" id="el-collapse-content-1791" class="wrap">
                    <div class="content">
                        <div class="courses courses3" @click="showNewNav">
                            <Car v-for="item in useData.theHome.slice(4, 10)" :name="item.name" :desc="item.currDesc"
                                :img="item.iconPath" :time1="item.startTeachingTime" :time2="item.finishTeachingTime"
                                :id="item.currNo" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <textarea id="copyText" width="10px" height="10px"
            style="resize: none; position: fixed; top: -9999px;"></textarea>
    </div>
</template>

<script setup>
    import { ref, inject, onMounted } from 'vue';
    import { useRouter } from 'vue-router';
    import useDataStore from "@/stores/Data";
    import Car from "@/components/learning-plaza/car.vue"

    // 使用 inject 钩子来获取通过 provide 提供的 showNavItem  
    const showNavItem = inject('showNavItem');

    // 使用 useRouter 钩子来获取路由实例  
    const router = useRouter();

    // 定义一个方法，用于导航到 '/front' 并显示导航项  
    const showNewNav = () => {
        router.push('/front/task');
        // 因为 showNavItem 本身就是一个 ref，所以直接设置其 value  
        if (showNavItem) {
            showNavItem.value = true;
        }
    };

    const useData = useDataStore();
    import { resHomeData } from '@/api/homes'

    onMounted(() => {
        useData.getHomeData()
    })

    const isExpanded = ref(false); // 使用 ref 创建一个响应式引用 
    const targetRotateDegrees = ref(0);

    function toggleExpansion() {
        isExpanded.value = !isExpanded.value; // 切换 isExpanded 的值 
        targetRotateDegrees.value = (targetRotateDegrees.value + 180) % 360;

    }
</script>

<style>
    .pageMain {
        min-height: calc(100vh - 244px)
    }

    div {
        box-sizing: border-box
    }

    *,
    :after,
    :before {
        box-sizing: border-box
    }

    body {
        margin: 0;
        color: rgba(0, 0, 0, .65);
        font-size: 14px;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
        font-variant: tabular-nums;
        line-height: 1.5;
        background-color: #fff;
        font-feature-settings: "tnum"
    }

    html {
        --antd-wave-shadow-color: #1890ff
    }

    .myCourses .creativeInfo {
        height: 200px;
        background-color: #003262;
        background-repeat: no-repeat;
        background-size: 100% 100%
    }

    .myCourses .creativeInfo .container {
        padding: 15px 0 0;
        margin: 0 auto;
        max-width: 1200px;
        height: 100%
    }

    .myCourses .creativeInfo .container .position {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        left: 0;
        top: 8px;
        height: 108px;
        width: 100%
    }

    .myCourses .creativeInfo .container .position .picture {
        width: 108px;
        height: 108px;
        background: #fff;
        border-radius: 50%
    }

    .myCourses .creativeInfo .container .position .picture img {
        -o-object-fit: cover;
        object-fit: cover;
        position: relative;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        transform: translate(-50%, -50%)
    }

    .myCourses .creativeInfo .container .position .info {
        margin-bottom: 14px;
        margin-left: 30px
    }

    .myCourses .creativeInfo .container .position .info .name {
        font-family: PMingLiU-ExtB;
        font-size: 20px;
        color: #fff
    }

    .myCourses .creativeInfo .container .position .info .label {
        margin-top: 10px;
        margin-right: 5px;
        width: -moz-fit-content;
        width: fit-content;
        display: inline-block;
        height: 21px;
        padding: 1px 2px;
        line-height: 21px;
        background-color: #fea91b;
        border-radius: 5px;
        font-family: PMingLiU-ExtB;
        font-size: 14px;
        color: #fff
    }

    .myCourses .creativeInfo .container .position .countInfo {
        margin: 0 0 0 auto;
        display: flex
    }

    .myCourses .creativeInfo .container .position .countInfo .infoBox {
        margin-left: 35px
    }

    .myCourses .creativeInfo .container .position .countInfo .infoBox .title {
        line-height: 1.5;
        font-family: PMingLiU-ExtB;
        font-size: 18px;
        color: #fff
    }

    .myCourses .creativeInfo .container .position .countInfo .infoBox .desc {
        line-height: 1;
        text-align: center;
        font-family: Segoe UI;
        font-size: 18px;
        color: #fff
    }

    .myCourses .switchBtn {
        padding-top: 30px;
        margin: 0 auto;
        max-width: 1200px
    }

    .myCourses .switchBtn .activeDesc {
        margin-left: 10px;
        color: #409eff
    }

    .myCoursesPageNav {
        height: 80px;
        background-color: #fff;
        box-shadow: 0 8px 12px 0 rgba(0, 0, 0, .16)
    }

    .myCoursesPageNav .container {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        max-width: 1200px;
        height: 100%
    }

    .myCoursesPageNav .container .flexBox {
        margin-right: 80px;
        display: flex;
        align-items: center;
        height: 27px
    }

    .myCoursesPageNav .container .flexBox .title {
        cursor: pointer;
        margin-left: 5px;
        font-family: Microsoft YaHei;
        font-size: 16px;
        color: #003262
    }

    .myCoursesPageNav .container .flexBox .isActive {
        position: relative;
        font-weight: 700;
        font-family: Microsoft YaHei;
        font-size: 16px;
        color: #003262
    }

    .myCoursesPageNav .container .flexBox .isActive:after {
        position: absolute;
        content: "";
        left: 50%;
        right: 50%;
        bottom: -5px;
        width: 52px;
        height: 2px;
        background: #003262;
        transform: translate(-50%)
    }

    .myCoursesPageNav .container a:last-child .flexBox {
        margin-right: 0
    }

    @media only screen and (max-width: 767px) {
        .myCoursesPageNav .container .flexBox {
            margin-right: 60px
        }
    }

    .myCoursesPageNav .container .rightBox {
        margin-left: 205px
    }

    .studying {
        padding-top: 30px;
        margin: 0 auto;
        max-width: 1200px
    }

    .studying .coursesList .nullData {
        font-size: 16px
    }

    .studying .coursesList .item-list {
        display: flex;
        flex-flow: wrap
    }

    @media only screen and (min-width: 1200px) {
        .studying .coursesList .item-list .el-col-lg-5 {
            margin-right: 40px;
            margin-bottom: 25px
        }

        .studying .coursesList .item-list .fourisLast {
            margin: 0
        }
    }

    @media only screen and (max-width: 1200px) and (min-width:768px) {
        .studying .coursesList .item-list .el-col-md-7 {
            margin-right: 5.55556%;
            margin-bottom: 25px
        }

        .studying .coursesList .item-list .coursesContent {
            max-width: 270px
        }

        .studying .coursesList .item-list .coursesContent .coursesImg img {
            width: 100% !important
        }

        .studying .coursesList .item-list .treeisLast {
            margin: 0
        }
    }

    @media only screen and (max-width: 767px) {
        .studying .coursesList .item-list .el-col-xs-11 {
            margin-right: 8.33333%;
            margin-bottom: 20px
        }

        .studying .coursesList .item-list .twoisLast {
            margin-right: 0 !important
        }
    }

    .studying .coursesList .item-list .coursesContent {
        padding: 11px 14px 0 15px;
        margin-bottom: 25px;
        position: relative;
        cursor: pointer;
        width: 270px;
        height: 480px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        transition: all .2s linear
    }

    .studying .coursesList .item-list .coursesContent .coursesImg {
        line-height: 0
    }

    .studying .coursesList .item-list .coursesContent .coursesImg img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 244px;
        height: 156px;
        border-radius: 5px
    }

    .studying .coursesList .item-list .coursesContent .courseInfo .name {
        margin-top: 15px;
        font-family: PMingLiU-ExtB;
        font-weight: 700;
        font-size: 20px;
        color: #333
    }

    .studying .coursesList .item-list .coursesContent .courseInfo .pushTime {
        margin-top: 5px;
        font-family: PMingLiU-ExtB;
        font-size: 12px;
        color: #999
    }

    .studying .coursesList .item-list .coursesContent .courseInfo .desc {
        margin-top: 9px;
        font-family: PMingLiU-ExtB;
        font-size: 14px;
        color: #666;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .studying .coursesList .item-list .coursesContent .courseInfo .time {
        margin-top: 9px;
        font-family: PMingLiU-ExtB;
        font-size: 14px;
        color: #666
    }

    .studying .coursesList .item-list .coursesContent .outTobottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 270px;
        height: 35px;
        border-radius: 0 0 7px 7px;
        transition: all .2s linear;
        text-align: center;
        line-height: 35px;
        font-family: Microsoft YaHei;
        font-size: 16px;
        color: #666;
        border-top: 1px solid #d3dae4
    }

    .studying .coursesList .item-list .coursesContent .outTobottom:hover {
        background-color: #ffc35f;
        color: #fff
    }

    .el-col-pull-0,
    .el-col-pull-1,
    .el-col-pull-10,
    .el-col-pull-11,
    .el-col-pull-13,
    .el-col-pull-14,
    .el-col-pull-15,
    .el-col-pull-16,
    .el-col-pull-17,
    .el-col-pull-18,
    .el-col-pull-19,
    .el-col-pull-2,
    .el-col-pull-20,
    .el-col-pull-21,
    .el-col-pull-22,
    .el-col-pull-23,
    .el-col-pull-24,
    .el-col-pull-3,
    .el-col-pull-4,
    .el-col-pull-5,
    .el-col-pull-6,
    .el-col-pull-7,
    .el-col-pull-8,
    .el-col-pull-9,
    .el-col-push-0,
    .el-col-push-1,
    .el-col-push-10,
    .el-col-push-11,
    .el-col-push-12,
    .el-col-push-13,
    .el-col-push-14,
    .el-col-push-15,
    .el-col-push-16,
    .el-col-push-17,
    .el-col-push-18,
    .el-col-push-19,
    .el-col-push-2,
    .el-col-push-20,
    .el-col-push-21,
    .el-col-push-22,
    .el-col-push-23,
    .el-col-push-24,
    .el-col-push-3,
    .el-col-push-4,
    .el-col-push-5,
    .el-col-push-6,
    .el-col-push-7,
    .el-col-push-8,
    .el-col-push-9,
    .el-row {
        position: relative;
    }

    .el-row {
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    .el-row::after,
    .el-row::before {
        display: table
    }

    .el-row::after {
        clear: both
    }

    .el-row--flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .el-col-0,
    .el-row--flex:after,
    .el-row--flex:before {
        display: none
    }

    .el-row--flex.is-justify-center {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .el-row--flex.is-justify-end {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    .el-row--flex.is-justify-space-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .el-row--flex.is-justify-space-around {
        -ms-flex-pack: distribute;
        justify-content: space-around
    }

    .el-row--flex.is-align-top {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .el-row--flex.is-align-middle {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .el-row--flex.is-align-bottom {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end
    }
</style>